<template>
	<view class="myTabs" :style="{height: `${search.height+search.top+10}px`,background: mybackgroundColor}">
		<view class="myTabs_main" :style="{top: `${search.top}px`,height: `${search.height}px`,lineHeight : `${search.height}px`,}">
			<view v-if="isTrue" class="leftIcon_back" @click="goBlack">
				<image src="/static/img/leftIcon.png"></image>
			</view>
			<span>{{title}}</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			mybackgroundColor: {
				type: String,
				default: 'transparent'
			},
			title: {
				type: String,
				default: ''
			},
			isTrue: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
		},
		methods: {
			goBlack(){
				this.$emit('goBlack')
			}

		}
	}
</script>

<style lang="scss" scoped>
	.myTabs {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 4;

		.myTabs_main {
			width: 100%;
			position: relative;
			padding: 0 24rpx;
			box-sizing: border-box;
			image{
				height: 40rpx;
				width: 40rpx;
				display: inline-block;
			}
			span{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				font-size: 32rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				color: #343434;
				width: 350rpx;
				display: inline-block;
				white-space: nowrap; 
				overflow: hidden; 
				text-overflow: ellipsis;
				text-align: center;
			}
		}
		.leftIcon_back{
			width: 200rpx;
			height: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>
